// import { TButton, TDialog, TPopupProxy, TTable } from 't';
import TButton from 't/basic/button';
import TDialog from 't/basic/dialog';
import TPopupProxy from 't/basic/popup-proxy';
import TTable from 't/basic/table';
import { computed, defineComponent, onMounted, ref, toRefs, watch } from 'vue';
import HistoryComponent from './HistoryComponent';
import { useQuasar } from '@teld/q-components';
import SingleRow from './SingleRow';
export default defineComponent({
  name: 'SelectHelperSmallSizeRender',
  components: {
    TPopupProxy,
    TTable,
    HistoryComponent,
    SingleRow,
    TButton,
    TDialog,
  },
  props: {
    simple: {
      type: Boolean,
      default: true,
    },
     width: {
      type: [String, Number],
      default:'1'
    },
    multiple: Boolean,
    height: String,
    position: String,
    historyEnable: Boolean,

    checkList: {
      type: [Array, String, Object],
    },
    columns: {
      type: Array,
    },
    valueField: String,
    labelField: String,
    helperCode: String,
    placeholder: String,
    list: Array,
  },
  emits: ['update:list'],

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();

    const $q=useQuasar()
    const {
      simple,
      width,
      multiple,
      height,
      position,
      historyEnable,
      checkList,
      columns,
      valueField,
      helperCode,
      placeholder,
      labelField,
      list,
    } = toRefs(props);

    const refTPopupProxy = ref(null);
    const selection = ref([]);
    const show = () => {
      refTPopupProxy.value&&refTPopupProxy.value.show();
    };
    const close = () => {
      refTPopupProxy.value&&refTPopupProxy.value.hide();
    };
    expose({
      show,
      close,
    });
    onMounted(() => {});

    function onClickHandler(params) {}
    const refSingleRow = ref();
    //简单模式
    const generateSimple = () => {
      return (
        <single-row
          ref={refSingleRow}
          width={'100vw'}
          simple={simple.value}
          onUpdateSelectList={e => {
            selectList.value = e;
          }}
          width={'100vw'}
          multiple={false}
          simple={simple.value}
          placeholder={placeholder.value}
          columns={columns.value}
          labelField={labelField.value}
          valueField={valueField.value}
          type='byPreview'
          checkList={list.value}

        />
      );
    };
    //已选择数据集合
    const selectList = ref([]);
    //定义点击事件
    const trTargetClick = target => {
      if (selectList.value.some(item => item.name == target.name)) {
        selectList.value = selectList.value.filter(
          item => item.name != target.name,
        );
      } else {
        if (!multiple.value) {
          selectList.value = [];
        }
        selectList.value.push(target);
      }
    };
    const checkAll = computed(() => {
      console.log(rows, selection.value);
      if (rows.every(item => selection.value.some(sel => item.name == sel))) {
        return ['ischecked'];
      } else if (
        !rows.some(item => selection.value.some(sel => item.name == sel))
      ) {
        return [];
      }
      return null;
    });
    if (multiple.value) {
      watch(
        () => selectList.value,
        () => {
          console.log(selectList.value);
          selection.value = selectList.value.map(item => item.name);
        },
        {
          deep: true,
        },
      );
    }

    //生成内容区域
    const generateContent = () => {
      return generateSimple();
    };
    return () => {
      console.log(
        'height:' + height.value
          ? height.value
          : '80vh' +
              ';width:100vw;background:#fff;display: flex; flex-direction: column;',
      );
      return (
        <t-dialog
          ref={refTPopupProxy}
          class='select_helper_popup select_helper_popup_m'
          position={position.value}
          // 如果设置为false 组件限制无法全屏
          maximized={true}
        >
          <div
            style={
              `${position.value=='right'?'height:100vh':height.value?'height:'+height.value:'height:80vh'}; width:100vw;background:#fff;display: flex; flex-direction: column;`
            }
          >
            <header>
             
              <span></span>
              <i
                class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`}
                onClick={() => {
                  close();
                }}
              ></i>
            </header>
            <div style='flex: 1 1 auto;overflow: auto;'>
              {generateContent()}
            </div>
            <div class='select_helper_popup_footGroup'>
              <t-button
                align='center'
                class='btn-fixed-width'
                style='width:50%;border:1px solid #DCDCDC;color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9))'
                onClick={close}
              >
                {$q.lang.label.cancel}
              </t-button>
              <t-button
                align='center'
                class='btn-fixed-width'
                color='primary'
                style='width:50%'
                onClick={() => {
                  emit('update:list', refSingleRow.value.rows);
                  close();
                }}
              >
                {$q.lang.label.ok}
                {/* 确认 */}
              </t-button>
            </div>
          </div>
        </t-dialog>
      );
    };
  },
});
